<template>
	<!-- 案件详情 -->
	<view class="">
		<!-- 顶部 -->
		<view class="view-top">
			<text class="view-top1" style="margin-left: 32rpx;">案件状态：</text>
			<text class="view-top1" style="font-size: 34rpx;">{{statusDesc}}</text>
			<image src="../../../../static/phone/case-detail-more.png"
				style="width: 48rpx;height: 48rpx;margin-left: auto;margin-right: 32rpx;"
				@click="showDrawer('showRight')"></image>
		</view>
		<!-- 列表 -->

		<scroll-view :style="{height:windowHeight}" :class="showRight? 'popup-show': 'popup-noshow'" scroll-y="true"
			:scroll-top="scrollTopHeight" :scroll-with-animation="false">
			<view id="chatList" class="chatList">
				<view v-for="(item,index) in dataList" :key="index" key="1">
					<!-- 撤回的显示 -->
					<view class="chehuiview" v-if="item.type.code=='2'" @click="recallIt(item)">
						<text>{{item.content}}
							<!-- 撤回的是文本消息 才可以有重新编辑功能 -->
							<text style="color: #2DA9C5;"
								v-if="item.recallType.code=='0' && (item.user.id==userInfo.userId)">重新编辑</text>
						</text>
					</view>
					<!-- 正常的显示 -->
					<view class="list-view" v-if="item.type.code!='2'">
						<view class="list-view-top">
							<image :src="item.avatarPic"
								style="width: 88rpx;height: 88rpx;margin-left: 32rpx;border-radius: 88rpx;"></image>
							<view style="margin-left: 16rpx;">
								<uni-row>
									<text class="list-view-top-name">{{item.user.account.realName}}</text>
								</uni-row>
								<uni-row>
									<text class="list-view-top-time">{{item.createTime}}</text>
								</uni-row>
							</view>
							<!-- 根据条件判断是否显示撤回 -->
							<text class="chehui" v-if="item.canWithdraw" @click="doWithdraw(index)">撤回</text>
						</view>

						<view class="list-content">
							<!-- 文本信息 -->
							<text v-if="item.type.code=='0'" class="list-content-text">
								{{item.content}}
							</text>

							<!-- 附件信息 -->
							<view v-if="item.type.code=='1'">
								<!-- 录音播放 -->
								<view class="list-content-yuyin"
									v-if="item.caseAttach.attachFile.fileSuffix=='aac' || item.caseAttach.attachFile.fileSuffix=='m4a'|| item.caseAttach.attachFile.fileSuffix=='mp3'">
									<image :src="item.openOrStopMusic ? musicStop:musicOpen"
										@click="opreaMusic(item,index)"
										style="width: 44rpx;height: 44rpx;margin-left: 24rpx;"></image>
									<image src="../../../../static/phone/case-detail-music.png"
										style="width: 160rpx;height: 28rpx;margin-left: 24rpx;"></image>
									<!-- <text class="list-content-yuyin-time">02:22</text> -->
								</view>


								<view style="display: flex;align-items: center;" @click="preview(item,index)">

									<!-- 图片 -->
									<image src="../../../../static/phone/jpg.png" style="width: 48rpx;height: 48rpx;"
										v-if="item.caseAttach.attachFile.fileSuffix =='jpg' || item.caseAttach.attachFile.fileSuffix=='png'
										|| item.caseAttach.attachFile.fileSuffix=='jpeg'">
									</image>
									<!-- 文档 -->
									<image src="../../../../static/phone/case-detail-word.png"
										style="width: 48rpx;height: 48rpx;"
										v-if="item.caseAttach.attachFile.fileSuffix =='docx' || item.caseAttach.attachFile.fileSuffix=='doc'">
									</image>
									<!-- 表格 -->
									<image src="../../../../static/phone/case-detail-excel.png"
										style="width: 48rpx;height: 48rpx;"
										v-if="item.caseAttach.attachFile.fileSuffix =='xlsx' || item.caseAttach.attachFile.fileSuffix=='xls'">
									</image>

									<!-- ppt -->
									<image src="../../../../static/phone/case-detail-ppt.png"
										style="width: 48rpx;height: 48rpx;"
										v-if="item.caseAttach.attachFile.fileSuffix =='pptx' || item.caseAttach.attachFile.fileSuffix=='ppt'">
									</image>
									<!-- pdf -->
									<image src="../../../../static/phone/case-detail-pdf.png"
										style="width: 48rpx;height: 48rpx;"
										v-if="item.caseAttach.attachFile.fileSuffix =='pdf' || item.caseAttach.attachFile.fileSuffix =='pdfx'">
									</image>

									<text class="list-content-name"
										v-if="item.caseAttach.attachFile.fileSuffix!='aac'
									&& item.caseAttach.attachFile.fileSuffix!='m4a'&& item.caseAttach.attachFile.fileSuffix!='mp3'">{{item.caseAttach.attachFile.nameF}}</text>

								</view>



							</view>



						</view>
					</view>
				</view>
			</view>


		</scroll-view>

		<!-- 	<view :style="{height:windowHeight}" :class="showRight? 'popup-show': 'popup-noshow'" id="chatList" class="chatList">
			
		</view> -->

		<!-- 底部 -->
		<view class="view-bottom" v-if="status!='5'">
			<view class="view-bottom-s">
				<view class="view-bottom-s-l" :style="lineCount>1 ? '':'height:90rpx'" @click="clickShowZhezhao(1)">
					<text class="view-bottom-s-l-input"
						:style="textValue!='' ? '':'color:#999999'">{{textValue!='' ? textValue:'回复...'}}</text>
				</view>
				<image src="../../../../static/phone/case-detail-speak.png" v-if="role!='0'"
					style="width: 64rpx;height: 64rpx;margin-left: 32rpx;" @click="clickShowZhezhao(2)"></image>
				<image v-if="textValue.length==0" src="../../../../static/phone/case-detail-add.png"
					style="width: 64rpx;height: 64rpx;margin-left: 32rpx;" @click="clickShowZhezhao(3)"></image>
				<text v-if="textValue.length>0" class="text-send" @click="textSend">
					发送
				</text>
			</view>

		</view>
		<view @touchmove.stop.prevent="disabledScroll">
			<uni-drawer ref="showRight" mode="right">
				<detail-drawer ref="drawer" :itemDetail="itemDetail" @refreshDeatil="refreshDeatil"
					:lawyerList="lawyerList" :customerList="customerList">
				</detail-drawer>
			</uni-drawer>
		</view>


		<view class="zhezhao" v-if="showZhezhao" @click="closeZhezhao" @touchmove.stop.prevent="disabledScroll">
			<view class="view-bottom" v-if="showBoard!=4">
				<view class="view-bottom-s">
					<view class="view-bottom-s-l" :style="lineCount>1 ? '':'height:90rpx'">
						<view class="uni-textarea">
							<textarea auto-height v-model="textValue" class="view-bottom-s-l-input" placeholder="回复..."
								placeholder-style="color:#999999" @click.stop="showKeyBoard" @linechange="lineChange"
								:focus="clickZhezhao1" @input="textChange" show-confirm-bar="false"
								cursor-spacing="20" />
						</view>
					</view>
					<image src="../../../../static/phone/case-detail-speak.png"
						style="width: 64rpx;height: 64rpx;margin-left: 32rpx;" @click.stop="clickShowZhezhao(2)">
					</image>
					<image v-if="textValue.length==0" src="../../../../static/phone/case-detail-add.png"
						style="width: 64rpx;height: 64rpx;margin-left: 32rpx;" @click.stop="clickShowZhezhao(3)">
					</image>
					<text v-if="textValue.length>0" class="text-send" @click="textSend">
						发送
					</text>

				</view>

				<!-- 常用语 -->
				<view class="zhezhao-view-bottom-s" v-if="showBoard==2">
					<view class="zhezhao-view-bottom-s-t">
						<text class="zhezhao-view-bottom-s-t1">常用语</text>
						<text class="zhezhao-view-bottom-s-t2" @click="clickSet">设置</text>
					</view>

					<scroll-view style="height: 330rpx;" scroll-y="true">
						<view v-for="(item,index) in tipsList" :key="index" @click.stop="clickTips(item)">
							<view class="tips-view">
								{{item.content}}
							</view>

						</view>
					</scroll-view>
				</view>
				<!-- 选项面板 -->
				<view class="zhezhao-view-bottom-s" v-if="showBoard==3" style="display: flex;flex-wrap: wrap;">
					<view class="options_item" v-if="!(index==5 && (role !='1' && role!='2'&& role !='3' && role!='4'))"
						v-for="(item,index) in optionsPanel" @click.stop="clickOptionsPanel(index)">
						<view style="display: flex;align-items: center;justify-content: center;">
							<image :src="item.url" style="width: 120rpx;height: 120rpx;"></image>
						</view>
						<view style="display: flex;align-items: center;justify-content: center;">
							<text class="options_item_name">{{item.name}}</text>
						</view>
					</view>
				</view>
				<!-- 模板库 -->
				<view class="zhezhao-view-bottom-s" v-if="showBoard==5" @click.stop="">
					<view class="zhezhao-view-bottom-s-t-search" style="margin-bottom: 24rpx;">
						<view class="zhezhao-view-bottom-s-t-search2">
							<image src="../../../../static/phone/phone_search.png"
								style="width: 32rpx;height: 32rpx;margin-left: 32rpx;"></image>

							<input type="text" v-model="muban_search" @input="muban_searchInput"
								class="muban_placeholder_class" placeholder-style="color:#999999" placeholder="搜索文件名称">
						</view>
					</view>
					<scroll-view style="height: 300rpx;" scroll-y="true">
						<view v-for="(item,index) in mubanList" :key="index" @click.stop="clickMuBan(item)"
							style="margin-left: 32rpx;margin-right: 32rpx">
							<view style="display: flex;align-items: center;;margin-bottom: 24rpx;">
								<image src="../../../../static/phone/jpg.png" style="width: 48rpx;height: 48rpx;">
								</image>

								<text class="muban_filename">{{item.name}}.{{item.fileSuffix}}</text>

								<text class="muban_filetype">{{item.classify.name}}</text>

							</view>

						</view>
					</scroll-view>


				</view>
			</view>


			<view class="view-bottom" v-if="showBoard==4" @click.stop="">
				<view class="view-bottom-voice">
					<view style="height: 62rpx;"></view>
					<view style="height: 40rpx;display: flex;align-items: center;justify-content: center;">
						<view v-if="voiceStatus==1" style="display: flex;align-items: center;">
							<view v-for="(item,index) in voiceTransList1" :key="index">

								<view :class="item ? 'voice-trans-item2':'voice-trans-item1'">

								</view>

							</view>
							<text class="voiceing-times">{{voiceTimer}}</text>
							<view v-for="(item,index) in voiceTransList2" :key="index">
								<view :class="item ? 'voice-trans-item2':'voice-trans-item1'">

								</view>
							</view>
						</view>

					</view>
					<view style="height: 28rpx;"></view>

					<view style="display: flex;align-items: center;justify-content: center;">
						<view style="display: flex;align-items: center;justify-content: center;" v-if="voiceStatus==0">
							<image src="../../../../static/phone/voice_start.png" style="width: 232rpx;height: 232rpx;"
								@click.stop="voiceStart"></image>
						</view>

						<view style="display: flex;align-items: center;justify-content: center;" v-if="voiceStatus==1">
							<image src="../../../../static/phone/voice_end.png" style="width: 232rpx;height: 232rpx;"
								@click.stop="voiceEnd"></image>
						</view>

						<view v-if="voiceStatus==2" style="display: flex;align-items: center;">
							<image src="../../../../static/phone/voice_rest.png" style="height:100rpx;width: 100rpx;"
								@click.stop="voiceStart"></image>
							<image src="../../../../static/phone/voice_closing_to_play.png"
								style="height:232rpx;width: 232rpx;margin-left: 44rpx;" v-if="!voicePlay"
								@click.stop="voiceClosingToPlay"></image>
							<image src="../../../../static/phone/voice_playing_to_close.png"
								style="height:232rpx;width: 232rpx;;margin-left: 44rpx;" v-if="voicePlay"
								@click.stop="voicePlayingToClose"></image>
							<image src="../../../../static/phone/voice_send.png"
								style="height:100rpx;width: 100rpx;;margin-left: 44rpx;" @click.stop="voiceSend">
							</image>
						</view>


					</view>

					<view style="display: flex;align-items: center;justify-content: center;">
						<text v-if="voiceStatus==0 && !voicePlay" class="voicetext">点击开始录音</text>
						<text v-if="voiceStatus==1 && !voicePlay" class="voicetext">点击结束录音</text>
						<text v-if="voiceStatus==2 && !voicePlay" class="voicetext">点击播放录音</text>
						<text v-if="voiceStatus==2 && voicePlay" class="voicetext">点击暂停录音</text>
					</view>

				</view>
			</view>
		</view>

	</view>


</template>

<script>
	import detailDrawer from './detail-drawer/detail-drawer.vue'
	let app = ''
	const recorderManager = uni.getRecorderManager()
	const innerAudioContext = uni.createInnerAudioContext()
	import requsetFileId from '@/pages/utils/upload.js'
import verify from '../../../utils/verifyUtils'

	export default {
		components: {
			detailDrawer
		},
		data() {
			return {
				id: '',
				role: '', //当前登录角色
				roleUrl: '',
				windowHeight: 0,
				screenWidth: 0,
				marginBottom: '',
				scrollTopHeight: 0,
				scrollViewHeight: 0,
				needAdapt: false, //判断是不是苹果x以上机型
				showRight: false,
				page: 1,
				count: 0,
				dataList: [], //沟通列表

				openOrStopMusic: false,
				musicOpen: require('../../../../static/phone/case-detail-open.png'),
				musicStop: require('../../../../static/phone/case-detail-stop.png'),

				lineCount: 0, //输入框行数
				textValue: '',
				//输入框弹窗
				clickZhezhao1: false,
				showZhezhao: false,
				showBoard: 1, //2 常用语  3 选项面板,4 语音  5 模板库
				tipsList: [],

				optionsPanel: [{
					name: '微信图片',
					url: require('../../../../static/phone/phone_wx_picture.png')
				}, {
					name: '微信文件',
					url: require('../../../../static/phone/phone_wx_file.png')
				}, {
					name: '手机相册',
					url: require('../../../../static/phone/phone_picture.png')
				}, {
					name: '拍摄',
					url: require('../../../../static/phone/phone_take.png')
				}, {
					name: '语音',
					url: require('../../../../static/phone/phone_voice.png')
				}, {
					name: '模板库',
					url: require('../../../../static/phone/phone_muban.png')
				}, ],

				// 模板库相关
				muban_search: '', //模板搜索关键字
				mubanList: [],

				// 录音相关
				voiceStatus: 0, // 0:刚打开录音面板  1 录音中  2 录音结束
				voicePlay: false, //播放  暂停

				//录音中的小动画
				voiceTransList1: [],
				voiceTransList2: [],
				voiceTimer: '00:00', //录音计时
				timer: '',
				minutes: 0,
				seconds: 0,
				timer2: '', //动画计时器
				seconds2: 0, //动画计时用
				voicePath: '', //录音地址
				voiceDuration: '', //录音时长
				voiceFileSize: '', //录音文件大小


				itemDetail: null, //案件详情数据
				status: '', //当前案件状态code
				statusDesc: '', //当前案件状态desc

				lawyerList: [],
				customerList: [],
				moren: require('../../../../static/phone/moren.png'),

				userInfo: null
			}
		},
		onLoad(options) {
			app = getApp()
			var _this = this
			_this.id = options.id
			_this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			_this.screenWidth = app.globalData.screenWidth
		
			if(app.globalData.isIPhone){
				if (app.globalData.isMax) {
					_this.windowHeight = (app.globalData.windowHeight - 180 - app.globalData.statusBarHeight) * 2 + 'rpx'
					_this.scrollViewHeight = app.globalData.windowHeight - 180 - app.globalData.statusBarHeight
				} else if (app.globalData.isPlus) {
					_this.windowHeight = (app.globalData.windowHeight - 140 - app.globalData.statusBarHeight) * 2 + 'rpx'
					_this.scrollViewHeight = app.globalData.windowHeight - 140 - app.globalData.statusBarHeight
				} else {
					_this.windowHeight = (app.globalData.windowHeight - 110 - app.globalData.statusBarHeight) * 2 + 'rpx'
					_this.scrollViewHeight = app.globalData.windowHeight - 110 - app.globalData.statusBarHeight
				}
			}else{
				_this.windowHeight = (app.globalData.windowHeight-80 ) * 2 + 'rpx'
				_this.scrollViewHeight = app.globalData.windowHeight-110
			}
			

			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})

			console.log('userInfo', app.globalData.userInfo)
			_this.userInfo = app.globalData.userInfo

			//获取录音数据
			recorderManager.onStop(function(res) {
				console.log('recorder stop', JSON.stringify(res))
				console.log('recorder stop', res)
				_this.voicePath = res.tempFilePath
				_this.voiceDuration = res.duration
				_this.voiceFileSize = res.fileSize

			});


			_this.getDetail()
			//获取模板列表
			_this.getTemplateList('')

			//获取交流记录
			_this.getCaseChatList()
		},
		onShow() {

			//获取常用语
			if (this.role != 0) {
				this.getPhrase()
			}

			this.getCaseUserLawyers()
			this.getCaseUserUsers()
		},
		mounted() {

		},
		deactivated() {
			clearInterval(this.timer);
			clearInterval(this.timer2);
		},
		onPullDownRefresh() {
			// this.page = 1
			// this.dataList = []
			// this.getCaseChatList()
		},
		onReachBottom() {
			// let _this = this
			// if (_this.dataList.length === _this.count) {
			// 	uni.showToast({
			// 		title: '暂无更多数据',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			// _this.page = _this.page + 1
			// _this.getCaseChatList()
		},

		methods: {
			/**
			 * 获取常用语
			 */
			async getPhrase() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/phrase/selector/0`,
					method: 'POST', //默认是GET
				})
				// console.log('常用语',res)

				if (res.data.code == 200) {
					_this.tipsList = res.data.data
				}

			},

			refreshDeatil() {
				this.$EventBus.$emit('refresh');
				this.getDetail()
			},

			/**
			 * 获取详情
			 */
			async getDetail() {
				let _this = this

				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/case/${_this.id}`,
					method: 'GET', //默认是GET
				})
				console.log('详情', res)
				if (res.data.code == 200) {
					_this.itemDetail = res.data.data
					// _this.status = _this.itemDetail.status.code
					// _this.statusDesc = _this.itemDetail.status.desc

					_this.status = _this.itemDetail.status.code
					if (_this.status == 4 || _this.status == '4') {
						_this.statusDesc = _this.itemDetail.bizStatus
					} else {
						_this.statusDesc = _this.itemDetail.status.desc
					}

				}
			},


			/**
			 * 承办律师
			 */
			async getCaseUserLawyers() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseUser/lawyers`,
					data: {
						caseId: _this.id,
					}
				})
				console.log('承办律师',res)
				if (res.data.code == 200) {
					let list = res.data.data
					
					console.log('承办律师头像list',list)

					for (var i = 0; i < list.length; i++) {
						let icons = list[i]['user']['account']['avatarPic']
						
						console.log('承办律师头像',icons)
						if(verify.isNotEmpty(icons)){
							if(icons.indexOf('http')<0){
								icons = this.$imageUrls({picUrls: icons})
							}
						}else{
							icons = _this.moren
						}
						
				
						list[i]['avatarPic'] = icons
					}
					if (list.lenth > 5) {
						for (var i = 0; i < 5; i++) {
							_this.lawyerList.push(list[i])
						}
					} else {
						_this.lawyerList = list
					}
				}
			},
			/**
			 * 参与用户
			 */
			async getCaseUserUsers() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseUser/users`,
					data: {
						caseId: _this.id,
					}
				})
				console.log('参与用户',res)
				if (res.data.code == 200) {
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						let icons = list[i]['user']['account']['avatarPic']
						if(verify.isNotEmpty(icons)){
							if(icons.indexOf('http')<0){
								icons = this.$imageUrls({picUrls: icons})
							}
						
						}else{
							icons = _this.moren
						}
						list[i]['avatarPic'] = icons
					}

					if (list.lenth > 5) {
						for (var i = 0; i < 5; i++) {
							_this.customerList.push(list[i])
						}
					} else {
						_this.customerList = list
					}
				}
			},


			/**
			 * 获取交流记录
			 */
			async getCaseChatList() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseChat/list`,
					data: {
						caseId: _this.id,
						page: 1,
						size: 10000,
						asc:'createTime'
					},
					method: 'POST', //默认是GET
				})
				console.log('交流记录', res)
				if (res.data.code == 200) {
					let list = res.data.data.list
					_this.count = res.data.data.count
					let userId = app.globalData.userInfo.userId
					for (var i = 0; i < list.length; i++) {

						if (list[i]['type']['code'] === '1') {
							let name = list[i]['caseAttach']['attachFile']['name']
							let nameArray = name.split('.')
							//后缀
							let nameL = nameArray[nameArray.length - 1]
							//后缀前面的部分
							let nameF = name.substring(0, name.length - nameL.length - 1)
							// console.log('nameF',nameF)

							if (name.length > 20) {
								nameF = nameF.substring(0, 17) + '...' + nameL
							} else {
								nameF = name
							}
							list[i]['caseAttach']['attachFile']['nameF'] = nameF

							if (nameL == 'm4a' || nameL == 'aac' || nameL == 'mp3') {
								list[i]['openOrStopMusic'] = false
							}
						}

						//判断这条信息是不是当前登录人编辑的
						if (list[i]['createBy'] == userId) {
							let createTime = list[i]['createTime']
							createTime = new Date(createTime)
							let time = createTime.getTime()
							let nowTime = new Date()
							let timeDifference = nowTime.getTime() - time; //时间差的毫秒数


							if (timeDifference < 24 * 60 * 60 * 1000) {
								//发布时间和现在相比小于24小时  可以撤回
								list[i]['canWithdraw'] = true
							} else {
								list[i]['canWithdraw'] = false
							}
						}
						
						let icons = list[i]['user']['account']['avatarPic']
						
					
						if(verify.isNotEmpty(icons)){
							if(icons.indexOf('http')<0){
								icons = this.$imageUrls({picUrls: icons})
							}
						}else{
							icons = _this.moren
						}
						
										
						list[i]['avatarPic'] = icons
						
		
						_this.dataList.push(list[i])
					}



					_this.$nextTick(() => {
						uni.createSelectorQuery().in(_this).select('#chatList').boundingClientRect((res) => {
							let top = res.height - _this.scrollViewHeight;
							if (top > 0) {
								_this.scrollTopHeight = top;
							}
						}).exec()
					})




				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},




			/**
			 * 点击右上角按钮
			 */
			showDrawer(e) {
				if (this.showRight) {
					this.showRight = false
					this.$refs[e].close()
					this.$refs[e].initData(0)
				} else {
					this.showRight = true
					this.$refs[e].open()
					//初始化 uni-drawer
					this.$refs[e].initData(this.screenWidth)
					//初始化 detail-drawer
					this.$refs.drawer.init()
				}

			},

			/**
			 * 点击了撤回
			 */
			async doWithdraw(index) {
				// console.log('撤回')
				let _this = this
				let id = _this.dataList[index]['id']
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseChat/recall`,
					data: {
						id: id
					},
					method: 'PUT', //默认是GET
				})
				// console.log('撤回结果',res)
				if (res.data.code == 200) {
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
					_this.page = 1
					_this.dataList = []
					_this.getCaseChatList()
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},

			//点了 重新编辑
			//只有文本信息才可以撤回
			async recallIt(val) {
				console.log('重新编辑', val)
				if (val.user.id == this.userInfo.userId) {
					if (val.recallType != undefined && val.recallType.code == '0') {
						let _this = this
						let recallId = val.recallId

						const res = await _this.$myRequest({
							url: `/${_this.roleUrl}/caseChat/${recallId}`,
							method: 'GET', //默认是GET
						})
						// console.log('撤回内容',res)
						if (res.data.code == 200) {
							let content = res.data.data.content
							_this.textValue = content
						}
					}

				}

			},

			/**
			 * 操作音频
			 */
			async opreaMusic(val, index) {

				let _this = this
				let list = _this.dataList
				if (!val.openOrStopMusic) {

					let url = val.caseAttach.attachFile.fileUrl

					const res = await this.$myRequest({
						url: `/comm/oss/url`,
						data: {
							ossPath: url
						},
						method: 'GET', //默认是GET
					})
					console.log('获取语音文件路径', res)

					innerAudioContext.src = res.data.data.url
					innerAudioContext.play();
				} else {
					innerAudioContext.pause()
				}

				for (var i = 0; i < list.length; i++) {
					if (i === index) {
						list[i]['openOrStopMusic'] = !list[i]['openOrStopMusic']
					}
				}

				console.log(list)

				_this.dataList = list
			},


			/**
			 * 操作输入框弹窗
			 * val=1 显示键盘   val=2 显示常用语 val=3 显示选择项
			 */
			clickShowZhezhao(val) {
				let _this = this
				_this.showZhezhao = true
				_this.showBoard = val
				if (val != 1) {
					_this.clickZhezhao1 = false
					uni.hideKeyboard()
				} else {
					_this.clickZhezhao1 = true
				}

			},
			/**
			 * 弹窗关闭 数据皆初始化
			 */
			closeZhezhao() {
				let _this = this
				uni.hideKeyboard()

				if (_this.showBoard == 4) {
					_this.voiceStatus = 0
					_this.voicePlay = false
					_this.voiceTimer = '00:00'
					_this.seconds = 0
					_this.minutes = 0
					this.seconds2 = 0
					if (_this.timer) {
						clearInterval(_this.timer);
					}
					if (_this.timer2) {
						clearInterval(_this.timer2);
					}
					this.voiceTransList1 = []
					this.voiceTransList2 = []
					for (var i = 0; i < 10; i++) {
						this.voiceTransList1.push(false)
						this.voiceTransList2.push(false)
					}
					_this.voicePath = ''
					_this.voiceDuration = ''
					_this.voiceFileSize = ''
				}

				_this.showBoard = 1
				_this.showZhezhao = false
			},
			/**
			 * 点击了输入框
			 */
			showKeyBoard() {
				let _this = this

				_this.showBoard = 1
				_this.clickZhezhao1 = true
			},
			/**
			 * 点击了常用语中的设置
			 */
			clickSet() {
				uni.navigateTo({
					url: '../commonPhrases/commonPhrases'
				})
			},
			/**
			 * 点击了常用语
			 */
			clickTips(val) {
				console.log(val)
				// this.isShowTips = false
				this.textValue = this.textValue + val.content
			},
			/**
			 * 选项面板选择操作
			 */
			clickOptionsPanel(index) {
				let _this = this
				if (index == 0) {
					//选择微信图片

					/**
					 * {	
							name: "钝感力.jpg"
							path: "http://tmp/YrW9fwcW8hnA7ecb7c794f550ad75219263412692169.jpg"
							size: 1688274
							time: 1588951959
							type: "image"
						}
					 */

					uni.chooseMessageFile({
						type: 'image',
						success(res) {
							console.log('chooseMessageFile', res)
							let tempFiles = res.tempFiles[0]
							_this.upLoadFile(tempFiles, 0)

						}
					})
				} else if (index == 1) {
					//选择微信文件

					/**
					 * {	
							name: "钝感力.jpg"
							path: "http://tmp/YrW9fwcW8hnA7ecb7c794f550ad75219263412692169.jpg"
							size: 1688274
							time: 1588951959
							type: "image"
						}
					 */

					uni.chooseMessageFile({
						type: 'file',
						extension: ['.ppt', '.doc', '.docx', '.xlsx', '.pdf'],
						success(res) {
							console.log('chooseMessageFile', res)
							let tempFiles = res.tempFiles[0]
							let name = tempFiles.name
							let path = tempFiles.path
							let size = tempFiles.size
							let time = tempFiles.time
							let type = tempFiles.type

							_this.upLoadFile(tempFiles, 1)

						}
					})
				} else if (index == 2) {
					//选择手机相册
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['album'],
						success(res) {
							console.log('chooseImage', res)
							let tempFilePaths = res.tempFilePaths[0]


							_this.upLoadFile(tempFilePaths, 2)


						}
					})

				} else if (index == 3) {
					//拍照
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['camera'],
						success(res) {
							console.log('chooseImage', res)
							let tempFilePaths = res.tempFilePaths[0]
							let path = res.tempFiles[0]['path']
							let size = res.tempFiles[0]['size']

							_this.upLoadFile(tempFilePaths, 3)
						}
					})
				} else if (index == 4) {
					//语音
					_this.showBoard = 4
					_this.voiceTransList1 = []
					_this.voiceTransList2 = []
					for (var i = 0; i < 10; i++) {
						_this.voiceTransList1.push(false)
						_this.voiceTransList2.push(false)
					}
				} else if (index == 5) {
					//查看模板库
					_this.showBoard = 5

				}
			},
			/**
			 * 点击了某个模板
			 */
			clickMuBan(item) {
				// console.log('选择模板', item)
				let _this = this
				let id = item.id
				_this.sendFile(id)

			},
			/**
			 * 点击开始录音/重录
			 */
			voiceStart() {
				let _this = this
				uni.authorize({
					scope: 'scope.record',
					success(res) {
						console.log(res)
						_this.voiceStatus = 1
						_this.voicePlay = false
						_this.timer = setInterval(_this.startTimer, 1000);
						_this.timer2 = setInterval(_this.startTimer2, 500);
						const options = {
							format: 'mp3', // 音频格式，有效值 aac/mp3
						}
						recorderManager.start(options);
					},
					fail() {
						uni.showModal({
							content: '检测到您没打开获取麦克风功能权限，是否去设置打开？',
							confirmText: "确认",
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											console.log(res);
											// _this.voiceStart();
										}
									})
								} else {
									console.log('取消');
									return false;
								}
							}
						})
						return false;
					}
				})

			},
			//正计时器
			startTimer() {
				this.seconds += 1;
				if (this.seconds >= 60) {
					this.seconds = 0;
					this.minutes = this.minutes + 1;
				}

				this.voiceTimer = (this.minutes < 10 ? '0' + this.minutes :
					this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds);

			},

			//显示正计时的动画  0.5秒改变
			startTimer2() {
				this.seconds2 += 1
				for (var i = 0; i < 10; i++) {
					if (this.seconds2 < 11) {
						if (i < this.seconds2) {
							this.voiceTransList2[i] = true
						} else {
							this.voiceTransList2[i] = false
						}
					} else {
						if (i < (this.seconds2 % 11)) {
							this.voiceTransList2[i] = true
						} else {
							this.voiceTransList2[i] = false
						}
					}

				}


				for (var i = 9; i > -1; i--) {

					if (this.seconds2 < 11) {

						if ((i + this.seconds2) > 9) {
							this.voiceTransList1[i] = true
						} else {
							this.voiceTransList1[i] = false
						}
					} else {
						if ((i + this.seconds2 % 11) > 9) {
							this.voiceTransList1[i] = true
						} else {
							this.voiceTransList1[i] = false
						}
					}



				}
			},

			/**
			 * 点击结束录音
			 */
			voiceEnd() {
				this.voiceStatus = 2
				this.voicePlay = false
				this.voiceTimer = '00:00'
				this.seconds = 0
				this.minute = 0
				this.voiceTransList1 = []
				this.voiceTransList2 = []
				this.seconds2 = 0
				for (var i = 0; i < 10; i++) {
					this.voiceTransList1.push(false)
					this.voiceTransList2.push(false)
				}
				if (this.timer) {
					clearInterval(this.timer);
				}
				if (this.timer2) {
					clearInterval(this.timer2);
				}
				recorderManager.stop();
			},
			/**
			 * 录用播放中点击停止
			 */
			voicePlayingToClose() {
				this.voicePlay = false
				innerAudioContext.pause()
			},
			/**
			 * 录用停止点击播放
			 */
			voiceClosingToPlay() {
				this.voicePlay = true
				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			},
			/**
			 * 确认录音
			 */
			voiceSend() {
				this.upLoadFile(this.voicePath, 4)
			},
			/**
			 * 输入框行数变化
			 */
			lineChange(val) {
				console.log(val)
				this.lineCount = val.detail.lineCount
			},
			/**
			 * 输入值
			 */
			textChange(val) {
				console.log(val)
				this.textValue = val.detail.value
			},

			/**
			 * 点文字发送
			 */
			async textSend() {
				// console.log('发送')
				// console.log(this.textValue)
				let _this = this

				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseChat/text`,
					data: {
						caseId: _this.id,
						content: _this.textValue
					},
					method: 'POST', //默认是GET
				})
				// console.log('文字发送结果', res)
				if (res.data.code === 200) {
					uni.showToast({
						title: '发送成功!',
						icon: 'success'

					})
					_this.textValue = ''
					_this.page = 1
					_this.dataList = []
					_this.getCaseChatList()

					_this.closeZhezhao()

				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'

					})
				}
			},

			/**
			 * 文件上传
			 */
			async upLoadFile(path, index) {
				console.log('文件上传', path)

				let _this = this
				let uploadPath = ''
				let name = ''
				let fileSuffix = ''
				let fileSuffixArray = []

				if (index == 0 || index == 1) {
					//选择微信图片或者微信文件
					uploadPath = path.path
					name = path.name

				} else if (index == 2 || index == 3 || index == 4) {
					//选择微信图片或者拍着或者语音
					uploadPath = path
					name = path

				}
				fileSuffixArray = uploadPath.split('.')

				fileSuffix = fileSuffixArray[fileSuffixArray.length - 1]

				// name = '1.' + fileSuffix
				uni.showLoading({
					title: '正在上传...'
				})
				let ossPath = 'temp/test'
				const uploads = await requsetFileId.uploads(ossPath, uploadPath, name, fileSuffix)
				console.log('uploads', uploads)
				uni.hideLoading()
				if (uploads.data.code == 200) {
					_this.sendFile(uploads.data.data.id)
				}

			},
			//发送附件信息
			async sendFile(val) {
				let _this = this
				let data = {
					caseId: _this.id,
					content: val
				}

				uni.showLoading({
					title: '正在上传...'
				})
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseChat/attach`,
					data: data,
					method: 'POST', //默认是GET
				})
				uni.hideLoading()
				// console.log('附件信息',res)
				if (res.data.code === 200) {
					uni.showToast({
						title: '发送成功!',
						icon: 'success'

					})
					_this.page = 1
					_this.dataList = []
					_this.getCaseChatList()
					_this.closeZhezhao()
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'

					})
				}
			},


			/**
			 * 模板库中的搜索框
			 */
			muban_searchInput(val) {
				let keyword = val.detail.value
				this.getTemplateList(keyword)
			},

			/**
			 * 获取模板列表
			 */
			async getTemplateList(keyword) {
				let _this = this
				let parmas = {
					"page": 1,
					"size": 1000,
				}
				if (keyword.length > 0) {
					parmas.name = 'lk:' + keyword
				}
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/template/selector`,
					data: parmas,
					method: 'POST', //默认是GET
				})
				_this.mubanList = []
				// console.log('模板库', res)
				if (res.data.code == 200) {
					let list = res.data.data.list
					_this.mubanList = list

				}
			},

			/**
			 * 预览文档
			 */
			async preview(item, index) {
				console.log('预览',item)
				console.log('预览',index)
				let url = item.caseAttach.attachFile.fileUrl
				const res = await this.$myRequest({
					url: `/comm/oss/url`,
					data: {
						ossPath: url
					},
					method: 'GET', //默认是GET
				})
				console.log('获取文件路径',res)
				if (res.data.code == 200) {
					let ss = res.data.data.url
					if (item.caseAttach.attachFile.fileSuffix == 'jpg' || item.caseAttach.attachFile.fileSuffix ==
						'png'|| item.caseAttach.attachFile.fileSuffix ==
						'jpeg') {
						let ssl = []
						ssl.push(ss)
						uni.previewImage({
							indicator: "none", //图片指示器样式
							current: 0,
							urls: ssl,
							success: (img) => {
								// console.log(img)
							}
						})
					} else {
						uni.downloadFile({
							url: ss,
							success: (downloadFile) => {
								console.log(downloadFile)
								uni.openDocument({
									filePath: downloadFile.tempFilePath
								})
							}
						})
					}

				}

			},
		}
	}
</script>

<style scoped>
	page {
		background-color: #F7F7F7;
	}

	.view-top {
		position: fixed;
		top: 0;
		width: 100%;
		height: 80rpx;
		z-index: 9999;
		background: #E8F7FB;
		display: flex;
		align-items: center;
	}

	.view-top1 {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2DA9C5;
	}

	.chehuiview {
		height: ;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.list-view {
		background-color: #ffffff;
		margin-top: 24rpx;

	}

	.list-view-top {
		height: 136rpx;
		display: flex;
		align-items: center;
	}

	.list-view-top-name {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
	}

	.list-view-top-time {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 4rpx;
	}

	.chehui {
		margin-left: auto;
		margin-right: 32rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2DA9C5;
	}

	.list-content {
		padding-bottom: 32rpx;
		background-color: #ffffff;
		padding-left: 136rpx;
		padding-right: 32rpx;
	}

	.list-content-text {
		/* margin-left: 12rpx; */
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}

	.list-content-yuyin {
		width: 384rpx;
		height: 80rpx;
		background: #F7F7F7;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
	}

	.list-content-yuyin-time {
		font-size: 28rpx;
		font-family: PingFangSC-, PingFang SC;
		font-weight: normal;
		color: #999999;
		margin-left: 24rpx;
	}

	.list-content-name {
		margin-left: 24rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.list-content-text-look {
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #2DA9C5;
		margin-left: 24rpx;
	}

	.view-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-top: 1rpx #eeeeee solid;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}

	.view-bottom .view-bottom-s {
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		display: flex;
		align-items: center;
	}

	.view-bottom .view-bottom-s-l {
		width: 494rpx;
		margin-left: 32rpx;
		background-color: #f7f7f7;
		display: flex;
		align-items: center;

	}

	.view-bottom .view-bottom-s-l-input {
		margin-left: 32rpx;
		width: 430rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;

	}

	.popup-show {
		margin-top: 56rpx;
		overflow: hidden;
		position: fixed;
		/* 	height: 100%;
		width: 100%; */
	}

	.popup-noshow {
		margin-top: 80rpx;
	}

	/deep/ .uni-textarea-wrapper {
		max-height: 180rpx;
	}

	.text-send {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2DA9C5;
		margin-left: 40rpx;
	}
</style>

<style scoped>
	.zhezhao {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9999;
		position: fixed;
		left: 0;
		top: 0;
		overflow: scroll;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zhezhao-view-bottom-s {
		height: 430rpx;

	}

	.zhezhao-view-bottom-s-t {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		border-top: 1rpx #eeeeee solid;
	}

	.zhezhao-view-bottom-s-t1 {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.zhezhao-view-bottom-s-t2 {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2DA9C5;
		margin-left: auto;
	}

	.tips-view {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-bottom: 24rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}

	.options_item {
		width: 25%;
		margin-top: 34rpx;
	}

	.options_item_name {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 8rpx;
	}

	.zhezhao-view-bottom-s-t-search {
		padding-top: 34rpx;
		border-top: 1rpx #eeeeee solid;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}

	.zhezhao-view-bottom-s-t-search2 {
		width: 686rpx;
		height: 64rpx;
		background: #F7F7F7;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
	}

	.muban_placeholder_class {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 8rpx;
	}

	.muban_filename {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 16rpx;
	}

	.muban_filetype {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-left: auto;
	}


	.view-bottom-voice {
		height: 538rpx;
	}

	.voicetext {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.voiceing-times {
		margin-left: 16rpx;
		margin-right: 16rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #18252C;
	}

	.voice-trans-item1 {
		width: 8rpx;
		height: 28rpx;
		background: #EAEAEA;
		border-radius: 4rpx;
		margin-left: 8rpx;
	}

	.voice-trans-item2 {
		width: 8rpx;
		height: 28rpx;
		background: #18252C;
		border-radius: 4rpx;
		margin-left: 8rpx;
	}
</style>